<template>
  <v-app class="simple">
    <v-row
      class="pt-2 pb-2 pl-2 pr-2"
      no-gutters
      align="center"
      justify="space-between"
      style="flex-grow: 0; height: 76px; border-bottom: 1px solid #f1f1f1"
    >
      <img width="100px" src="~/assets/logo.jpg" alt="" @click="$router.push(localePath('/'))" />
      <div class="right-btn">
        <v-row no-gutters align="center" justify="space-between">
          <v-select
            v-model="$i18n.locale"
            full-width
            hide-details
            dense
            outlined
            style="width: 120px"
            :items="items"
            append-icon="$dropdown"
            class="mr-5"
            @change="changeLocale"
          />
        </v-row>
      </div>
    </v-row>
    <v-main>
      <Nuxt />
    </v-main>
    <div class="footer">
      <v-row no-gutters class="mt-8" justify="center">
        <div>
          <img width="100" src="~/assets/logo.jpg" />
        </div>
      </v-row>
      <v-row no-gutters class="pb-8" justify="center">
        ©2025 J Project Co.,Ltd. all rights reserved.
      </v-row>
    </div>
  </v-app>
</template>
<script>
export default {
  data() {
    return {
      items: [
        {
          text: 'English',
          value: 'en'
        },
        {
          text: '日本語',
          value: 'ja'
        },
        {
          text: '繁體中文',
          value: 'zh-Hant'
        }
      ]
    };
  },
  methods: {
    changeLocale(val) {
      this.$router.push(this.switchLocalePath(val));
    }
  }
};
</script>
<style scoped lang="scss">
.simple {
  max-width: 1200px;
  margin: 0 auto;
}
.footer {
  width: 100%;
}
</style>
